import * as React from "react";
import CommonUtils from "../../utils/CommonUtils";
import PropTypes from "prop-types";

/**
 * 折叠面板
 * props: {
 *     expanded: {boolean} 是否展开，默认不展开,
 *     orientation: {Collapse.ORIENTATION} 折叠方向，默认纵向,
 *     size: {{width: {number}, height: {number}}} 展开的大小，默认会获取组件原来大小
 * }
 */
export default class Collapse extends React.Component {
    /**
     * 折叠方向
     * @type {{VERTICAL: string, HORIZONTAL: string}}
     */
    static ORIENTATION = {
        HORIZONTAL: "horizontal",
        VERTICAL: "vertical"
    };
    static propTypes = {
        expanded: PropTypes.bool,
        orientation: PropTypes.oneOf(Object.values(Collapse.ORIENTATION)),
        size: PropTypes.shape({
            width: PropTypes.number,
            height: PropTypes.number
        })
    };
    constructor(props) {
        super(props);
        this.state = {
            style: {overflow: "hidden", transition: ".5s", transitionProperty: "width,height"},
            display: props.expanded,
        };
    }

    /**
     * 组件更新
     */
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(this.transitioning)return;
        //从隐藏到显示
        if(!prevProps.expanded && this.props.expanded){
            let state = this.state;
            let size = this.props.size || CommonUtils.getElementSize(this.element);
            if(this.props.orientation === Collapse.ORIENTATION.HORIZONTAL) {
                state.style.width = 0;
            }else{
                state.style.height = 0;
            }
            state.display = true;
            this.transitioning = true;
            this.setState(state, ()=>{
                CommonUtils.waitBrowserRender(this.element);
                state = this.state;
                if(this.props.orientation === Collapse.ORIENTATION.HORIZONTAL){
                    state.style.width = size.width + "px";
                }else{
                    state.style.height = size.height + "px";
                }
                this.setState(state);
            });
        }
        //从显示到隐藏
        else if(prevProps.expanded && !this.props.expanded){
            let state = this.state;
            this.transitioning = true;
            if(this.props.orientation === Collapse.ORIENTATION.HORIZONTAL){
                state.style.width = 0;
            }else{
                state.style.height = 0;
            }
            this.setState(state);
        }
    }

    /**
     * 动画结束处理
     */
    onTransitionEndHandler(){
        if(!this.props.expanded){
            let state = this.state;
            delete state.style.width;
            delete state.style.height;
            state.display = false;
            this.setState(state);
        }
        this.transitioning = false;
    }

    render() {
        return <div
            ref={element=>this.element=element}
            className={this.props.className + (this.state.display?"":" d-none")}
            onTransitionEnd={this.onTransitionEndHandler.bind(this)}
            style={Object.assign({}, this.state.style, this.props.style)}
        >
            {this.props.children}
        </div>
    }
}
